/*
 * @Description: 代码定义信息面板 -- 实现拖拽
 * 暂未解决ts onRow报错问题
 * @Author: Rfan
 * @Date: 2022-02-10 09:30:53
 * @LastEditTime: 2022-05-25 08:50:18
 */

import { FC, useCallback, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import classNames from 'classnames/bind';

import styles from '../styles/fondPane.module.scss';
import { useCodeDefContext } from '../contexts/CodeDefContext';
import { useFormatMessage } from '@/utils/intlHelpers';
import DraggableBodyRow from '@/components/DraggableBodyRow';

const cx = classNames.bind(styles);

const { Column } = Table;

export type FondPaneProps = {
  title: string;
  data: any;
};

const FondPane: FC<FondPaneProps> = ({ title, data: data1 }) => {
  console.log('fond pane:', title, data1);
  const formatMessage = useFormatMessage();
  const { list, loading } = useCodeDefContext();
  const [data, setData] = useState(list);
  const [selectItems, setSelectItems] = useState([]);

  // 表格选项相关设置
  const onSelectChange = (selectedRowKeys: number[]): void => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectItems(selectedRowKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  // 拖拽相关
  const components = {
    body: {
      row: DraggableBodyRow
    }
  };

  const moveRow = useCallback(
    (dragIndex, hoverIndex) => {
      const dragRow = data[dragIndex];
      setData(
        update(data, {
          $splice: [
            [dragIndex, 1],
            [hoverIndex, 0, dragRow]
          ]
        })
      );
    },
    [data]
  );

  return (
    <div className={cx('fond-pane')}>
      <div className={cx('fond-header')}>
        <div className={cx('title')}>{title}</div>
        <div className={cx('opearte')}>
          <Space>
            <Button disabled>保存排序</Button>
            <Button disabled>删除选中</Button>
            <Button disabled>添加代码</Button>
          </Space>
        </div>
      </div>
      <div className={cx('container')}>
        <DndProvider backend={HTML5Backend}>
          <Table
            dataSource={data}
            loading={loading}
            rowKey="id"
            rowSelection={rowSelection}
            components={components}
            onRow={(_record, index) =>
              ({
                index,
                moveRow
              } as any)
            }
          >
            <Column title="ID" dataIndex="id" key="id" align="center" />
            <Column title="代码名称" dataIndex="code" key="code" align="center" />
            <Column title="代码值" dataIndex="name" key="name" align="center" />
            <Column
              title="状态"
              dataIndex="name"
              key="name"
              align="center"
              render={(name) => <Tag color="blue">{name}</Tag>}
            />
            <Column title="描述" dataIndex="operateTime" key="operateTime" align="center" />
            <Column
              title={formatMessage('tableAction')}
              key="action"
              align="center"
              render={(_text, record) => (
                <Space>
                  <Button type="link">修改</Button>
                  <Button type="link" danger>
                    删除
                  </Button>
                </Space>
              )}
            />
          </Table>
        </DndProvider>
      </div>
    </div>
  );
};

export default FondPane;
